import React from 'react';
import { Row, Col, Form, Input, Button } from 'antd';
// import { nextTick } from 'utils/nextTick';

const formItemLayout = {
    labelCol: {
        span: 8
    },
    wrapperCol: {
        span: 16
    }
};
const FormItem = Form.Item;

class SearchBar extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
      };
    }

    renderBtn() {
        const { form, onSearch } = this.props;
        return (
          <FormItem
            {...formItemLayout}
          >
            <Button
              type="primary" 
              onClick={() => onSearch(form.getFieldsValue())}
            >搜索</Button>
          </FormItem>
        );
      }
    
    render(){
        const { form } = this.props;
        const { getFieldDecorator } = form;
        return (
          <Form layout="horizontal" style={{marginTop: 10}}>
            <Row gutter={16}>
              <Col span="16">
                <FormItem
                  label="设备名称"
                  {...formItemLayout}
                          >
                  {getFieldDecorator('deviceName', {
                              initialValue: ''
                          })(<Input placeholder="请输入设备名称" />)
                          }
                </FormItem>
              </Col>
              <Col span="8">
                {this.renderBtn()}
              </Col>
            </Row>
          </Form>
        );
    }
}

export default Form.create({})(SearchBar);